import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "../../components/Header/Header";
import { Button, Input, List, Toast } from "antd-mobile";
import "./Login.less";
import {actions,getUser} from "../../store/modules/login"
import { bindActionCreators } from "redux";

class Login extends Component {
  render() {
      let {user,login:{changeUser,reqLogin},history:{push}} = this.props
    return (
      <>
        <Header title="登录"></Header>
        {/* <div>user:{JSON.stringify(user)}</div> */}
        <div className="container">
          <List.Item prefix="账号">
            <Input
              placeholder="请输入账号"
              clearable
              onChange={(v) => changeUser("phone",v)}
            />
          </List.Item>
          <List.Item prefix="密码">
            <Input
              placeholder="请输入密码"
              clearable
              type="密码"
              onChange={(v) => changeUser("password",v)}
            />
          </List.Item>
          <div className="text-center">
            <Button
              color="primary"
              onClick={() => reqLogin(push)}
              className="btn"
            >
              登录
            </Button>
            <Button
              color="primary"
              onClick={() => this.props.history.push("/register")}
            >
              注册
            </Button>
          </div>
        </div>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
      user:getUser(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      login:bindActionCreators(actions,dispatch)
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
